<template>
  <el-container class="page">
	
    <el-header class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <el-page-header title=" ">
				<template #icon>
					<el-icon @click="back"><ArrowLeftBold/></el-icon>
				</template>
				<template #content>
					<span class="text">反馈任务详细信息</span>
				</template>
          </el-page-header>
        </div>
      </div>
    </el-header>
	
    <el-main>
		<el-descriptions
		:column="1"
		border
		>
		<el-descriptions-item label="反馈用户">
			<template #default>
				{{detailsData.name}}  {{detailsData.phoneNumber}}
			</template>
		</el-descriptions-item>
		<el-descriptions-item label="网格">
			<template #default>
				{{detailsData.province.name}}   {{detailsData.city.name}}
			</template>
		</el-descriptions-item>
		<el-descriptions-item label="详细地址">
			<template #default>
				{{detailsData.address}}
			</template>
		</el-descriptions-item>
		<el-descriptions-item label="预估等级">
			<template #default>
				{{detailsData.level}}
			</template>
		</el-descriptions-item>
		<el-descriptions-item label="详细描述">
			<template #default>
				{{detailsData.message}}
			</template>
		</el-descriptions-item>
		</el-descriptions>
		
		<el-card class="box-card" shadow="hover" style="margin-top: 20px;">
        <template v-slot:header>
            <div class="clearfix">
                <span>空气质量数据输入</span>
            </div>
        </template>
        <el-form :model="testData" label-width="90px">
          <el-form-item label="SO₂浓度" class="so">
            <el-input class="test" v-model.number="testData.so2Concentration" placeholder="请输入SO₂浓度" type="number" @input="SO2limit">
              <template #append>ug/m<sup>3</sup></template>
            </el-input>
			<div class="level" :style="{backgroundColor:levelColor(SOlevel(testData.so2Concentration))}">{{levelMsg(SOlevel(testData.so2Concentration))}}</div>
          </el-form-item>
          <el-form-item label="CO浓度" class="so">
            <el-input class="test" v-model="testData.coConcentration" placeholder="请输入CO浓度" type="number" @input="COlimit">
              <template #append>ug/m<sup>3</sup></template>
            </el-input>
            <div class="level" :style="{backgroundColor:levelColor(COlevel(testData.coConcentration))}">{{levelMsg(COlevel(testData.coConcentration))}}</div>
          </el-form-item>
          <el-form-item label="PM₂.₅浓度" class="so">
            <el-input class="test" v-model="testData.pmConcentration" placeholder="请输入PM₂.₅浓度" type="number" @input="PMlimit">
              <template #append>ug/m<sup>3</sup></template>
            </el-input>
			<div class="level" :style="{backgroundColor:levelColor(PMlevel(testData.pmConcentration))}">{{levelMsg(PMlevel(testData.pmConcentration))}}</div>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="box-card" shadow="hover" style="margin-top: 20px;">
        <template v-slot:header>
            <div class="clearfix">
                <span>实测AQI等级</span>
            </div>
        </template>
		<div class="text-center" :style="{backgroundColor:levelColor(AQIlevel(SOlevel(testData.so2Concentration),COlevel(testData.coConcentration),PMlevel(testData.pmConcentration)))}">
			{{AQIlevelMsg(AQIlevel(SOlevel(testData.so2Concentration),COlevel(testData.coConcentration),PMlevel(testData.pmConcentration)))}}
		</div>
      </el-card>

     
        <el-button type="primary" class="button" @click="submitAll">提交实测数据</el-button>
     
    </el-main>
  </el-container>
</template>

<script setup>
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import { ArrowLeftBold} from '@element-plus/icons-vue';
import axios from '@/utils/axiosUtil.js';
import router from '@/router';
import { ElMessage } from 'element-plus';
let route = useRoute()
let detailsData = JSON.parse(route.query.data)
let testData = reactive({
	so2Concentration:'',
	coConcentration:'',
	pmConcentration:''
})
let back = function(){
	router.push({path:"/feedbackTaskList"})
}
let now = new Date()
let getDate = function(now){
	let year = now.getFullYear();
	let month = String(now.getMonth() + 1).padStart(2, '0');
	let day = String(now.getDate()).padStart(2, '0');
	return `${year}-${month}-${day}`
}
let SO2limit = function(){
	if (testData.so2Concentration < 0) 
	{ testData.so2Concentration = 0; } 
	else if (testData.so2Concentration > 9999) 
	{ testData.so2Concentration = 9999; }
}
let COlimit = function(){
	if (testData.coConcentration < 0) 
	{ testData.coConcentration = 0; } 
	else if (testData.coConcentration > 150) 
	{ testData.coConcentration = 150; }
}
let PMlimit = function(){
	if (testData.pmConcentration < 0) 
	{ testData.pmConcentration = 0; } 
	else if (testData.pmConcentration > 500) 
	{ testData.pmConcentration = 500; }
}
let levelColor = (level)=>{
	let color; 
	switch (level) { 
		case 1: color = '#1be21f'; break; 
		case 2: color = '#dddd23'; break; 
		case 3: color = '#fc8016'; break; 
		case 4: color = '#f5150d'; break; 
		case 5: color = '#970c4d'; break; 
		case 6: color = '#5e041a'; break; 
	} 
	return color ;
}
let SOlevel = function(so2Concentration){
	if(so2Concentration>0&&so2Concentration<=50){
		return 1;
	}
	else if(so2Concentration>50&&so2Concentration<=150){
		return 2;
	}
	else if(so2Concentration>150&&so2Concentration<=475){
		return 3;
	}
	else if(so2Concentration>475&&so2Concentration<=800){
		return 4;
	}
	else if(so2Concentration>800&&so2Concentration<=1600){
		return 5;
	}
	else if(so2Concentration>1600&&so2Concentration<=9999){
		return 6;
	}
}
let COlevel = function(coConcentration){
	if(coConcentration>0&&coConcentration<=5){
		return 1;
	}
	else if(coConcentration>5&&coConcentration<=10){
		return 2;
	}
	else if(coConcentration>10&&coConcentration<=35){
		return 3;
	}
	else if(coConcentration>35&&coConcentration<=60){
		return 4;
	}
	else if(coConcentration>60&&coConcentration<=90){
		return 5;
	}
	else if(coConcentration>90&&coConcentration<=150){
		return 6;
	}
}
let PMlevel = function(pmConcentration){
	if(pmConcentration>0&&pmConcentration<=35){
		return 1;
	}
	else if(pmConcentration>35&&pmConcentration<=75){
		return 2;
	}
	else if(pmConcentration>75&&pmConcentration<=115){
		return 3;
	}
	else if(pmConcentration>115&&pmConcentration<=150){
		return 4;
	}
	else if(pmConcentration>150&&pmConcentration<=250){
		return 5;
	}
	else if(pmConcentration>250&&pmConcentration<=500){
		return 6;
	}
}
let AQIlevel = function(SO2level,COlevel,PMlevel){
	const filteredLevels = [SO2level, COlevel, PMlevel].filter(level =>
		level !== null && 
		level !== undefined && 
		!isNaN(level) && 
		String(level).trim() !== ''
	);
	
	// 如果所有参数都是空值，返回 undefined 或其他默认值
	if (filteredLevels.length === 0) {
		return undefined; // 或者你可以返回一个特定的默认值，如 -1, 0, 'N/A' 等
	}
	
	// 返回非空参数中的最大值
	return Math.max(...filteredLevels);
}
let levelMsg = function(level){
	let msg;
	switch (level) {
		case 1: msg = '一'; break; 
		case 2: msg = '二'; break; 
		case 3: msg = '三'; break; 
		case 4: msg = '四'; break; 
		case 5: msg = '五'; break; 
		case 6: msg = '六'; break; 
	} 
	return msg ;
}
let AQIlevelMsg = function(level){
	let msg;
	switch (level) {
		case 1: msg = '一级 优'; break; 
		case 2: msg = '二级 良'; break; 
		case 3: msg = '三级 轻度污染'; break; 
		case 4: msg = '四级 中度污染'; break; 
		case 5: msg = '五级 中度污染'; break; 
		case 6: msg = '六级 严重污染'; break; 
	} 
	return msg ;
}
let submitAll = function(){
  if (
    testData.so2Concentration === '' ||
    testData.coConcentration === '' ||
    testData.pmConcentration === ''
  ) {
    ElMessage({
      message: '请填写所有空气质量数据后再提交',
      type: 'error',
    });
    return;
  }

  axios({
    method:'post',
    url:'http://localhost:7000/service-nepg/grider/submitMsg',
    data:{
		sO2 : testData.so2Concentration,
		cO : testData.coConcentration,
		pM : testData.pmConcentration,
		smesg_id :detailsData.id,
		level : AQIlevel(SOlevel(testData.so2Concentration),COlevel(testData.coConcentration),PMlevel(testData.pmConcentration)),
		date : getDate(now),
		time : now.toLocaleTimeString()
    }
  }).then(res=>{
    if(res.data==true){
      ElMessage({
        message: '提交成功',
        type: 'success',
      });
      setTimeout(() => {
        back()
      }, 1000);
    } else {
      ElMessage({
        message: '提交失败',
        type: 'error',
      });
    }
  });
}

</script>

<style scoped>
.page {
  width: 100%;
  height: 100%;
  background: url('@/assets/kongjing1.jpg');
}

.so{
    display: flex;
}

.test{
    width: 80%;
}

.text{
	color: white;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
 background: linear-gradient(to right, #607baa, #7d95c5); /* 使用渐变色 */
  color: white;
  padding: 10px;
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.button {
  width: 100%;
  height: 45px;
  margin-top: 20px;
  font-size: 18px;
  background: linear-gradient(to right,#c5c5e1, #8ba1d0); /* 使用渐变色 */
  border: none;
  color: white;
  border-radius: 7px; /* 圆角按钮 */
  letter-spacing: 2px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: background 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
}

.button:hover {
  background: linear-gradient(to right, #a0a0dc, #5c82d4); /* 悬停时的渐变颜色 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
}
.el-tag {
  margin: 0 10px;
}
.level{
    width: 35px;
    height: 35px;
	border-radius: 4px;
	margin-left: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: white;
	
}
.text-center{
	color: white;
	width: 100%;
	height: 40px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

</style>